@import "@automattic/typography/styles/variables";

.plan-price {
	margin: 0;
	font-size: $font-title-large;
	line-height: 1.5;
	color: var(--color-neutral-70);

	.badge {
		margin-left: 8px;
		vertical-align: super;
	}
}

.plan-price.is-original {
	color: var(--color-neutral-light);
}

.plan-price.is-discounted {
	color: var(--color-success);
}

.plan-price.is-discounted,
.plan-price.is-original {
	position: relative;
	align-items: stretch;
	margin-right: 8px;
}

.plan-price.is-original::before {
	position: absolute;
	content: "";
	left: 0;
	top: 50%;
	right: 0;
	border-top: 2px solid var(--color-accent);
	transform: rotate(-16deg);
	opacity: 0.9;
}

.plan-price__currency-symbol,
.plan-price__fraction,
.plan-price__tax-amount {
	vertical-align: super;
	font-size: $font-body-extra-small;
}

.plan-price.is-discounted .plan-price__currency-symbol {
	color: var(--color-success);
}

.plan-price__tax-amount {
	margin-left: 4px;
}

.plan-price__currency-symbol,
.plan-price__tax-amount {
	color: var(--color-text-subtle);
}

.plan-price__integer {
	margin: 0 1px;
	font-weight: 400;
}

.plan-price__fraction {
	font-weight: 600;
}

.plan-price__term {
	display: inline-block;
	font-size: 0.875rem;
	text-align: left;
	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
	line-height: 1rem;
	margin-left: 5px;
}
